<template>
  <view class="h-14 max-h-14 min-h-14 flex flex-row items-center justify-around bg-[#e5e5e5]">
    <view v-for="(item,index) in tabBarList" class="tabContent" @click="to(item.path)">
      <view>
        <image class="w-6 h-6"
        :src="currentPage==item.path.substring(1)?item.activeImage:item.image"></image>
      </view>
      <view>{{ item.text }}</view>
    </view>
    
    <!-- <view class="tabContent" @click="to('/pages/home/home')">
      <view>
        <image class="w-4 h-4"
        :src="currentPage=='pages/home/home'?'/static/images/home_active.png':'/static/images/home.png'"></image>
      </view>
      <view>首页</view>
    </view>
    <view class="tabContent" @click="to('/pages/my/my')">
      <view>
        <image class="w-4 h-4"
        :src="currentPage=='pages/my/my'?'/static/images/my_active.png':'/static/images/my.png'"></image>
      </view>
      <view>我的</view>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import type { AppConfigVO } from '@/types/AppConfigType';
import type { R } from '@/types/R';
import { keyValueGetByKey } from '@/utils/KeyValueUtils';
import { request } from '@/utils/Request';
import { ref, onMounted } from 'vue';

interface TabBar{
  path:string,
  image:string,
  activeImage:string,
  text:string,
}

let tabBarList = ref<TabBar[]>()

let currentPage = ref<string>()

const to = (page:string)=>{
  uni.redirectTo({
    url:page
  })
}

onMounted(async ()=>{
  let pages = getCurrentPages()
  let page = pages[0]
  currentPage.value = page.route
  let r:R<AppConfigVO> = await request.post("/app/appBase/getAppConfig")
  tabBarList.value = r.data.tabBarList
})
</script>

<style scoped>
  .tabContent{
    @apply w-full flex flex-col items-center
  }
  /* .tabContent:active{
    @apply w-full flex flex-col items-center bg-gray-400
  } */
</style>
